<template>
  <div class="serviceManage">
    <div class="detail">
      <div class="head"><span>参会人详情</span></div>
      <div class="info">
        <table class="tabletop">
          <tr>
            <td>会议号 :</td>
            <td>{{cfCode}}</td>
            <td>会议名称 :</td>
            <td>{{cfName}}</td>
          </tr>
          <tr>
            <td>会议开始时间 :</td>
            <td>{{ cfStartTime?setLocalTime(cfStartTime):cfStartTime}}</td>
            <td>会议时长 :</td>
            <td>{{duration}}</td>
          </tr>
        </table>
        <div class="line"></div>
      </div>
      <div class="content">
        <div class="checkall flex-end">
          <div class="export cp" @click="downloadAll">批量下载</div>
        </div>

        <table class="Datatable">
          <thead>
            <tr>
              <th>
                <input
                  type="checkbox"
                  v-model="checked"
                  v-on:click="checkedAll"
                />
              </th>
              <th>文件名称</th>
              <th>上传人</th>
              <th>上传时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody v-if="total>0">
            <tr v-for="(item,index) in info" :key="index">
              <td>
                <input
                  type="checkbox"
                  v-model="checkboxList"
                  :value="item.fileId"
                />
              </td>

              <td>{{item.fileName}}</td>
              <td>{{item.userName}}</td>
              <td>{{ item.addTime?setLocalTime(item.addTime):item.addTime}}</td>

              <td>
                <span class="ck cp download" @click="download(item.fileId)"
                  >下载</span
                >

                <span class="ck cp delete" @click="del(item.fileId)">删除</span>
              </td>
            </tr>
          </tbody>
          <tbody v-else>
            <tr>
              <td colspan="5">暂无数据</td>
            </tr>
          </tbody>
        </table>
        <div class="flex-end">
          <el-pagination
            v-if="total>0"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 15, 20, 25]"
            :page-size="10"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import file from '@/utils/tools/fileExport'

export default {
  data () {
    return {

      currentPage: 1,
      size: 10,
      checkboxList: [],
      checked: false,
      visible: false,
      total: 0,
      cfCode: '',
      cfStartTime: '',
      duration: '',
      cfName: ''
    }
  },
  computed: {

    info () {
      return this.$store.state.cfManage.tableData
    },
    id () {
      return Number(sessionStorage.getItem('cfid'))
    }
  },
  created () {
    this.$store.dispatch('cfManage/getDetailData', { cfId: this.id }).then((res) => {
      // // console.log(res.data)
      this.cfCode = res.data.cfCode
      this.cfName = res.data.cfName
      this.cfStartTime = res.data.cfStartTime
      this.duration = res.data.duration
      this.$store.dispatch('cfManage/getDocumentsData', { cfId: this.id, page: 0, size: this.size }).then(res => {
        this.total = res.data.size
      })
    })
  },
  methods: {
    handleCurrentChange (val) {
      this.currentPage = val
      this.$store.dispatch('cfManage/getDocumentsData', { cfId: this.id, page: this.currentPage - 1, size: this.size })
    },
    handleSizeChange (size) {
      this.size = size
      this.$store.dispatch('cfManage/getDocumentsData', { cfId: this.id, page: this.currentPage - 1, size: this.size })
    },
    setLocalTime (time) {
      return this.$moment(+new Date(time)).format('YYYY-MM-DD HH:mm:ss')
    },
    checkedAll () {
      // console.log(this.checked)
      if (this.checked) {
        // 实现反选
        this.checkboxList = []
      } else {
        // 实现全选
        this.checkboxList = []
        this.info.forEach((item) => {
          this.checkboxList.push(item.fileId)
        })
      }
    },
    download (fileId) {
      this.$store.dispatch('cfManage/downloadDocumentData', { fileIds: fileId }).then(res => {
        file.fileExport(res.data, '文件.zip')
      }).catch((err) => {
        this.$message({
          type: 'error',
          message: err,
          duration: 1000
        })
      })
    },
    del (fileId) {
      // // console.log(fileId)
      this.$store.dispatch('cfManage/deleteDocumentData', { fileId, cfId: this.id }).then(res => {
        this.$message({
          type: 'success',
          message: res.message,
          duration: 1000
        })
        this.$store.dispatch('cfManage/getDocumentsData', { cfId: this.id, page: 0, size: this.size }).then(res => {
          this.total = res.data.size
        })
      }).catch(res => {
        this.$message({
          type: 'error',
          message: res,
          duration: 1000
        })
      })
    },
    downloadAll () {
      if (this.checkboxList.length > 0) {
        const fileIds = this.checkboxList.join(',')
        // const fileIds = '585,586'
        this.$store.dispatch('cfManage/downloadDocumentData', { fileIds }).then(res => {
          // console.log(res)
          file.fileExport(res.data, '文件.zip')
        }).catch((err) => {
          this.$message({
            type: 'error',
            message: err,
            duration: 1000
          })
        })
      } else {
        this.$message({
          type: 'error',
          message: '请先选择需要下载的文件',
          duration: 1000
        })
      }
    }
  },
  watch: {
    // 深度 watcher
    checkboxList: {
      handler: function (val, oldVal) {
        if (this.checkboxList.length === this.info.length && this.checkboxList.length !== 0) {
          this.checked = true
        } else {
          this.checked = false
        }
      },
      deep: true
    },
    info: {
      handler: function (val, oldVal) {
        this.checked = false
        this.checkboxList = []
      },
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>
.serviceManage {

  .detail {
    min-height: 932px;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 8px;
    // margin-top: 24px;
    padding: 0 24px;
  }
  .head {
    width: 100%;
    height: 78px;
    border-bottom: 1px solid #e6e9f0;
    position: relative;
    font-size: 16px;
    font-weight: 500;
    color: #1b1f35;
    span {
      position: absolute;
      bottom: 20px;
    }
  }
  .info {
    padding-top: 37px;
    // padding-left: 20px;
    // border-bottom: 1px solid #ccc;
    .tabletop {
      // border-bottom: 1px solid #ccc ;
      margin-left: 20px;
    }
    tr {
      color: #3d4966;
      vertical-align: top;
      td:nth-child(1) {
        width: 104px;
        height: 50px;
        color: #1b1f35;
        text-align: right;
      }
      td:nth-child(2) {
        padding-left: 20px;
        width: 243px;
      }
      td:nth-child(3) {
        width: 76px;
        text-align: right;
      }
      td:nth-child(4) {
        // width: 1161px;
        padding-left: 20px;
      }
    }
  }
  .content {
    width: 100%;
    // min-height: 674px;
    // padding: 0 24px;
    background-color: #fff;
    padding-top: 1px;
    // margin-top: 20px;
    // margin-left: -20px;
    border-radius: 8px;
    position: relative;
    // padding-bottom: 172px;
    .el-pagination {
      right: 0px;
    }

    table {
      // width: 100%;
      // border-collapse: collapse;
      // table-layout: fixed;
      th,
      td {
        // border: 1px solid #e6e9f0;
        // text-align: center;
        // height: 60px;
        // line-height: 60px;
        // color: #3d4966;
        // white-space: nowrap;
        // overflow: hidden;
        // text-overflow: ellipsis;
        &:nth-child(1) {
          width: 60px;
        }
        &:nth-child(2) {
          width: 384px;
        }
        &:nth-child(3) {
          width: 234px;
        }
        &:nth-child(4) {
          width: 474px;
        }
        &:nth-child(5) {
          width: 410px;
        }
      }

      // thead {
      //   tr {
      //     background-color: #f7f9fc;
      //     color: #1f2e4d;
      //   }
      // }

      // tbody {
      //   tr:hover {
      //     background-color: #f7f9fc;
      //   }
      // }
    }
  }
}
</style>
